<template>
    <teleport to='#mapContainer'>
        <div class="mapModeBtn" @click="setMode" :title="title">
            <i v-if="modeType=='vector'" class="qi-1027"></i>
            <i v-else-if="modeType=='satellite'" class="qi-1028"></i>
        </div>
    </teleport>
</template>
<script setup>
    import {ref} from "vue"
    const props = defineProps({
        mapObj:''
    })

    const modeType = ref('satellite')  // vector为标准地图，satellite位卫星地图
    const title = ref('切换到卫星地图')

    const setMode = ()=>{
        if(modeType.value =='vector'){ // 标准地图
            title.value = '切换到标准地图'
            modeType.value = 'satellite' 
        }else{ // 卫星地图
            title.value = '切换到卫星地图'
            modeType.value = 'vector'
            
        }
        props.mapObj.setBaseMap(modeType.value)
    }
    
</script>
<style lang="scss" scoped>
.mapModeBtn{
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 30px;
    bottom: 101px;
    z-index: 2001;
    width: 40px;
    height: 40px;
    background: #fff;
    box-shadow: 0 8px 19px rgba(41,64,102,.12);
    border-radius: 4px;
    cursor: pointer;
}

</style>